@import "../module/task2_framework";
@import "../module/color-framework";
@import "../module/variablae-value-framework";

body{
  background-color: #f0f0f0;
}
.header {
  @extend %display;
  height: 3.4rem;
  background-color:#29bde0;

  .sidebar-box {

    margin-left:15px ;

    .sidebar, .sidebar2, .sidebar3 {
      width: 28px;
      height: 4px;
      background-color:$white-color;
      margin-bottom: 6.5px;

    }
  }
}

.main{
  background-color: #f0f0f0;
  padding-bottom: 15rem;
}

.hint-box{
  @include test;
  @extend %allot;

  & p{
    font-size: 18px;
    color: #9a9a9a;
  }

  .return{
    background-image: url("../images/return.png");
    background-repeat: no-repeat;
    background-size: 100%;
    width: 20px;
    height: 34px;
    margin-right: 10px;
  }
}

.main{
  @include test;
  height: 16rem;
  position: relative;




  .text-t{
    height: 3.75rem;
    color: $orange-color;
    border-bottom: 1px solid $orange-color;
    @extend %vertical-center;
  }

  .button-a,.button-f{
    @extend %vertical-center;
    margin: 15px 25px;
    height: 5.2rem;
    background-color: #24A7C6;
  }

  .total{
    @extend %allot;

    .button-t{
      @extend .button-a;
      width: 100%;
    }

    .triangle{
      @include triangle(7px,14px,7px,#fbb435);
      float: right;
      position: absolute;
      right: 0;
      margin-right: 5px;

    }
  }

}


.vessel{
  @extend %vertical-center;
  .dot-one,.dot-two,.dot-three,.dot-four{
    margin: 10px 3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #f0f0f0;
    @extend  %vertical-center;

  }

}